<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="日期范围：" prop="dateRange">
        <DatePicker
          v-model="searchForm.dateRange"
          format="yyyy-MM-dd"
          placeholder="请选择日期范围"
          style="width: 200px"
          type="daterange"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <Button
      :disabled="exportBtnDisable"
      icon="md-cloud-download"
      style="margin-bottom:15px"
      type="primary"
      @click="exportTaskRank"
    >导出
    </Button>
    <Table
      id="salaryTable"
      :columns="columns"
      :data="data"
      :loading="listLoading"
      border
      size="small"
      stripe
      @on-sort-change="listSort"
    ></Table>
  </Card>
</template>
<script>
import {lineTaskDalaryList} from '../../api/taskSalary'

export default {
  data() {
    return {
      total: 0,
      showModal: false,
      dataLoading: false,
      listLoading: false,
      sortLoading: false,
      exportBtnDisable: true,
      searchForm: {
        line: '-1',
        dateRange: '',
        sort: 'aver_air_km',
        sort_order: 'desc',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      dataForm: {
        date: ''
      },
      columns: [
        {
          title: '线路',
          key: 'line',
          width: 80,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          width: 80,
          align: 'center',
          fixed: 'left',
          sortable: 'custom'
        },
        {
          title: '气耗',
          key: 'total_sk_yh_money',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '顺康',
          key: 'total_sk_money',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '逸华',
          key: 'total_yh_money',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '公里',
          key: 'total_km',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '收入',
          key: 'total_income',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '气耗/天',
          key: 'aver_sk_yh_money',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '元/百公里',
          key: 'aver_money_km',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: 'm³/百公里',
          key: 'aver_air_km',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '气量(顺康）',
          key: 'total_sk_air',
          width: 120,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '气量(逸华）',
          key: 'total_yh_air',
          width: 120,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '收入/百公里',
          key: 'aver_income_km',
          width: 120,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '排名',
          key: 'ranking',
          width: 110,
          align: 'center',
          sortable: 'custom'
        },
        {
          title: '气耗/趟',
          key: 'aver_money_off',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '往返里程',
          key: 'aver_return_km',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '收入/趟',
          key: 'aver_income_off',
          width: 110,
          align: 'right',
          sortable: 'custom'
        },
        {
          title: '掉趟',
          key: 'drop_off',
          width: 110,
          align: 'center',
          sortable: 'custom'
        },
        {
          title: '备注',
          key: 'remark',
          width: 120,
          align: 'right'
        }
      ],
      data: [],
      lines: []
    }
  },
  watch: {
    // "$route": 'getDataList'
  },
  mounted() {
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getDataList()
    },
    //导出
    exportTaskRank() {
      const line = this.searchForm.line
      const dateRange = this.searchForm.dateRange
      const sort = this.searchForm.sort
      const sort_order = this.searchForm.sort_order
      const start_date_time = dateRange[0]
      const end_date_time = dateRange[1]
      let start_date = ''
      let end_date = ''
      if (start_date_time) {
        const start_d = new Date(start_date_time)
        start_date =
          start_d.getFullYear() +
          '-' +
          (start_d.getMonth() + 1) +
          '-' +
          start_d.getDate()
      }
      if (end_date_time) {
        const end_d = new Date(end_date_time)
        end_date =
          end_d.getFullYear() +
          '-' +
          (end_d.getMonth() + 1) +
          '-' +
          end_d.getDate()
      }

      window.location.href =
        '/api/exportLineTaskDalary?line=' +
        line +
        '&start_date_time=' +
        start_date +
        '&end_date_time=' +
        end_date
    },
    getDataList() {
      if (
        this.searchForm.line !== '-1' &&
        this.searchForm.start_date_time !== '' &&
        this.searchForm.end_date_time !== ''
      ) {
        this.listLoading = true
        lineTaskDalaryList(this.searchForm).then(res => {
          this.exportBtnDisable = false
          this.listLoading = false
          this.data = res.data.result
        })
      } else {
        this.$Message.error('请选择：线路及时间范围')
        this.exportBtnDisable = true
      }
    },
    handleReset() {
      this.searchForm = {
        line: '-1',
        sort: 'aver_air_km',
        sort_order: 'desc',
        pageNumber: 1,
        pageSize: 10
      }
      this.exportBtnDisable = true
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getDataList()
    },
    listSort(v) {
      console.log(v)
      this.searchForm.sort = v.key
      this.searchForm.sort_order = v.order
      this.getDataList()
    },
    init() {
      // this.getDataList();
    }
  }
}
</script>
<style src="./salaryAccounting.css"></style>
